<script setup lang="ts">
const contactData = useContactData()
const menuIndex = ref(0)
const route = useRoute()
watch(() => route.query, (query) => {
  if (query.menu)
    menuIndex.value = +query.menu
}, { immediate: true })
</script>

<template>
  <div class="contact">
    <img class="banner" src="https://public-oss-file.zmaxfilm.com/website-compress/lianxiwomen-banner.png" alt="联系我们">

    <div class="content">
      <div v-for="(item, index) in contactData" :id="item.id" :key="index" class="item"
        :class="{ reverse: index % 2 !== 0 }">
        <img class="img" :src="item.image" alt="">
        <div class="info flex flex-col leading-none">
          <span class="text-[28px] mb-[30px]">{{ item.name }}</span>
          <span class="text-[22px] mb-[20px]">{{ item.address }}</span>
          <span class="text-[22px]">{{ item.phone }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.contact {
  display: flex;
  flex-direction: column;

  .banner {
    width: 100%;
    height: 600px;
  }

  .content {
    gap: 100px;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    padding: 100px 0;
    flex-direction: column;
  }

  .item {
    gap: 215px;
    display: flex;
    align-items: center;

    &.reverse {
      flex-direction: row-reverse;

      .info {
        flex: 1;
        text-align: left;
      }
    }

    .img {
      width: 492px;
      height: 170px;
    }
  }
}
</style>
